const LeftCard = {
    props:{
        listData:{
            type:Array,
            default:[]
            
        }
    },
    setup(props,ctx){
        // ctx 就是充当Vue2 this
        const del = id => {
            ctx.emit("removeitem",id)
        }

        const edit = item => {
            ctx.emit("edithandle",item)
        }

        return {
            del,
            edit,
        }
    },
    template:`
        <div class="card">
            <list-item v-for="item in listData" :key="item.id">
                <template v-slot:left>
                    <div style="display:flex;align-items:center;">
                        <div style="display:flex;flex-direction:column;margin-left:12px;">
                            <span style="font-weight:bold;">{{item.title}}</span>
                            <span style="font-size:13px;">{{item.content.substring(0,10)+"..."}}</span>
                        </div>
                    </div>
                </template>
                <template v-slot:right>
                    <a class="btn btn-warn" href="#" @click="del(item.id)">删除</a>
                    <a class="btn" href="#" @click="edit(item)">编辑</a>
                </template>
            </list-item>
        </div>
    
    `,
    components:{
        ListItem
    }
}